<template>
  <view class="container">
    <view class="auth-panel">
      <view class="auth-title">授权登录</view>
      <!-- 用户信息展示区 -->
      <view class="user-info-panel">
        <!-- 选择头像 -->
        <button v-if="isMpWeixin" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-btn">
          <image :src="userInfo.avatarUrl || defaultAvatar" class="avatar"></image>
        </button>
        <image v-else :src="userInfo.avatarUrl || defaultAvatar" class="avatar"></image>
        <!-- 输入昵称 -->
        <input v-if="isMpWeixin" type="nickname" v-model="userInfo.nickName" placeholder="请输入昵称" class="nickname-input" />
        <view v-else class="nickname">{{ userInfo.nickName }}</view>
        <!-- 展示手机号 -->
        <view class="phone" v-if="phone">手机号：{{ phone }}</view>
      </view>
      <!-- 获取手机号按钮（官方弹窗） -->
      <button v-if="isMpWeixin && userInfo.avatarUrl && userInfo.nickName && !phone"
              open-type="getPhoneNumber"
              @getphonenumber="onGetPhoneNumber"
              class="auth-btn">
        获取手机号
      </button>
      <!-- 授权并登录按钮 -->
      <button v-if="isMpWeixin && userInfo.avatarUrl && userInfo.nickName && phone && !loginSuccess" class="auth-btn" @click="confirmLogin">授权并登录</button>
      <button v-if="isApp && !loginSuccess" class="auth-btn" @click="confirmLogin">点击授权并登录</button>
      <view v-if="loginSuccess" class="success-box">
        <view class="checkmark">✔</view>
        <view class="success-text">登录成功</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      qrcodeId: '',
      loginSuccess: false,
      userInfo: {
        avatarUrl: '',
        nickName: ''
      },
      phone: '',
      isMpWeixin: false,
      isApp: false,
      defaultAvatar: '/static/images/default-avatar.png'
    }
  },
  onLoad(options) {
    this.qrcodeId = options.qrcodeId
    // 平台判断
    // #ifdef MP-WEIXIN
    this.isMpWeixin = true
    // #endif
    // #ifdef APP-PLUS
    this.isApp = true
    // #endif
  },
  methods: {
    // 选择头像
    onChooseAvatar(e) {
      this.userInfo.avatarUrl = e.detail.avatarUrl
    },
    // 获取手机号（官方弹窗）
    onGetPhoneNumber(e) {
      console.log('e', e)
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        uni.request({
          url: 'http://10.16.0.192:3000/api/decodePhone',
          method: 'POST',
          data: { code: e.detail.code },
          success: (resp) => {
            if (resp.data && resp.data.phoneNumber) {
              this.phone = resp.data.phoneNumber
            } else {
              uni.showToast({ title: '手机号获取失败', icon: 'none' })
            }
          },
          fail: () => {
            uni.showToast({ title: '手机号获取失败', icon: 'none' })
          }
        })
      } else {
        uni.showToast({ title: '用户拒绝授权手机号', icon: 'none' })
        this.phone = '12345678911'
      }
    },
    // 授权并登录
    confirmLogin() {
      let userInfo = this.userInfo
      let phone = this.phone
      // APP端用静态信息
      // #ifdef APP-PLUS
      userInfo = {
        nickName: 'App用户',
        avatarUrl: '',
        gender: 1,
        country: 'China',
        province: '',
        city: ''
      }
      phone = '18888888888'
      // #endif
      uni.request({
        url: 'http://10.16.0.192:3000/api/scan/confirm',
        method: 'POST',
        data: {
          qrcodeId: this.qrcodeId,
          userInfo: { ...userInfo, phone: phone }
        },
        success: (resp) => {
          if (resp.data && resp.data.success) {
            this.loginSuccess = true
            uni.showToast({ title: '授权成功', icon: 'success' })
            setTimeout(() => {
              uni.navigateBack({ delta: 2 })
            }, 1500)
          } else {
            uni.showToast({ title: resp.data.message || '授权失败', icon: 'none' })
          }
        },
        fail: () => {
          uni.showToast({ title: '授权请求失败', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.auth-panel {
  background: #fffbe6;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-align: center;
}
.auth-title {
  font-size: 36rpx;
  color: #faad14;
  margin-bottom: 40rpx;
}
.auth-btn {
  background: #007AFF;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  padding: 20rpx 60rpx;
  margin-bottom: 20rpx;
}
.user-info-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}
.avatar-btn {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 10rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
  background: #f0f0f0;
}
.nickname-input {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  width: 220rpx;
  text-align: center;
  background: #fff;
}
.nickname {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}
.phone {
  font-size: 28rpx;
  color: #888;
}
.success-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30rpx;
}
.checkmark {
  font-size: 80rpx;
  color: #52c41a;
  margin-bottom: 20rpx;
}
.success-text {
  font-size: 32rpx;
  color: #52c41a;
}
</style> 